vue踩坑日记 |
您所在的位置：网站首页 › input focus属性 › vue踩坑日记 |
|
一、问题描述
想在el-input显示的时候focus。 export default { name: "", data() { return { isEdit: false } }, methods: { ondbclick() { // 想在input出现的时候把focus到input上 this.isEdit = true; this.$refs.editTask.onfocus(); }, } } 二、问题所在上面样写是不行的，你会发现并没有focus到el-input上，这是因为data改变后vue是异步响应的，它会先执行下一条代码，但是这时的el-input并没有显示在页面上，所以不会focus。 三、解决办法 vue为这种情况提供了方法为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。 在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上。 四、实现代码 methods: { ondbclick() { this.isEdit = true; this.$nextTick(() => this.$refs.editTask.focus()); }, } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |